<template>
  <div>
    <div id="dingwei">
      <div id="city" @click="cheng()">{{ items.chengshi }}▼</div>
      <div id="findarea">
        <div id="ding">☥</div>
        <div id="findcity" @click="sou()">{{ findcountry }}</div>
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="4vw"
          height="4vw"
          fill="currentColor"
          class="bi bi-chevron-down"
          viewBox="0 0 16 16"
        >
          <path
            fill-rule="evenodd"
            d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"
          />
        </svg>
      </div>
      <div id="findname" @click="findename()">教练</div>
    </div>
  </div>
</template>
<script>
import getgetCurrentCityName from "../assets/map.js";
import cityjson from "../assets/city_code.json";
export default {
  name: "city",
  data() {
    return {
      msg: "Welcome to Your Vue.js App",
      findcountry: "请输入查询的城市",
      items: {
        chengshi: "城市", //改进可以将城市存到缓存里
        dingwei: "",
        lat: "",
        lng: "",
        bianma: "",
        ding: "",
      },
      lg: "",
      lt: "",
    };
  },
  methods: {
    getCurrentCity() {
      getgetCurrentCityName.init().then((BMap) => {
        console.log(BMap);
        const geolocation = new BMap.Geolocation();
        var _this = this;
        geolocation.getCurrentPosition(function getinfo(position) {
          let city = position.address.city;
          _this.bianma(city);
          sessionStorage.setItem("chengshi", city);
          _this.$set(_this.items, "dingwei", city);
          _this.$set(_this.items, "chengshi", city);
        });
        geolocation.getCurrentPosition(function locationSuccess(position) {
          console.log("定位成功");
          var lng = position.longitude;
          var lat = position.latitude;
          _this.items.lng = lng;
          _this.items.lat = lat;
          _this.lg = lng;
          _this.lt = lat;
          sessionStorage.setItem("lng", lng);
          sessionStorage.setItem("lat", lat);
          // console.log(lng,lat);

          var myGeo = new BMap.Geocoder();
          // 根据坐标得到地址描述
          myGeo.getLocation(new BMap.Point(lng, lat), function (result) {
            if (result) {
              console.log(result);
              _this.findcountry = result.address;
              _this.ding = result.address;
            }
          });
        });
      });
    },
    bianma(country) {
      var cityjs = cityjson.RECORDS;
      var code = cityjs.findIndex((item) => item.name_city == country);
      this.bianma = cityjs[code].code_city;
      sessionStorage.setItem("code", this.bianma);
      // console.log(this.bianma);
    },
    cheng() {
      this.$router.push({ name: "city" });
    },
    jieshou() {
      var _this = this;
      var chengshi = this.$route.params.city;
      this.$set(this.items, "chengshi", chengshi);
      this.bianma = this.$route.params.code;
      sessionStorage.setItem("code", this.bianma);
      this.$set(this, "findcountry", "请选择出发地址");
      if (this.items.chengshi == this.items.dingwei) {
        sessionStorage.setItem("findcountry", this.ding);
      } else {
        sessionStorage.setItem("findcountry", "");
      }
      console.log("-----" + this.$route.params.city);
      console.log("-----" + this.$route.params.code);
      getgetCurrentCityName.init().then((BMap) => {
        var myGeo = new BMap.Geocoder();
        // 根据坐标得到地址描述
        myGeo.getPoint(
          chengshi,
          function (result) {
            if (result) {
              console.log(result);
              var lng = result.lng;
              var lat = result.lat;
              _this.items.lng = lng;
              _this.items.lat = lat;
              _this.lg = lng;
              _this.lt = lat;
              sessionStorage.setItem("lng", lng);
              sessionStorage.setItem("lat", lat);
            }
          },
          chengshi
        );
      });
    },
    inputshou() {
      this.findcountry = sessionStorage.getItem("name");
      console.log(this.findcountry);
    },
    sou() {
      var pan = this.dingwei == this.findcountry;
      this.$router.push({ name: "dizhi" });
      // this.busvue.$emit("updata", this.items);
      sessionStorage.setItem("chengshi", this.items.chengshi);
      console.log(this.items.chengshi == this.items.dingwei);
      if (this.items.chengshi == this.items.dingwei) {
        sessionStorage.setItem("findcountry", this.ding);
      }
      console.log(this.lt, this.lg);
      sessionStorage.setItem("name", this.findcountry);
      sessionStorage.setItem("lat", this.lt);
      sessionStorage.setItem("lng", this.lg);
    },
    findename() {
      this.$router.push({ name: "find" });
    },
  },
  mounted() {
    this.getCurrentCity();
  },
  watch: {
    $route(to, from) {
      // console.log('------'+(typeof(to.params.city)=='undefined'));
      if (
        from.path == "/arrcity/city" &&
        (typeof to.params.city == "undefined") == false
      ) {
        console.log("从city跳转");
        this.jieshou();
      } else if (from.path == "/arrcity/dizhi") {
        console.log("从地址跳转");
        this.inputshou();
      }
    },
  },
};
</script>
<style scoped>
#dingwei {
  width: 100%;
  height: 6vh;
  border-bottom: 0.2vw solid rgba(180, 180, 180, 0.226);
  display: flex;
  white-space: nowrap;
  justify-content: space-between;
}
#city {
  margin-left: 5vw;
  width: 15vw;
  height: 100%;
  font-size: 3.5vw;
  line-height: 6vh;
  overflow: hidden;
  text-overflow: ellipsis;
}
#findarea {
  width: 65vw;
  height: 100%;
  display: flex;
}
#findcity {
  overflow: hidden;
  text-overflow: ellipsis;
  width: 40vw;
  height: 100%;
  font-size: 3.5vw;
  line-height: 6vh;
}
#findarea > svg {
  margin-top: 3vw;
}
#ding {
  width: 5vw;
  font-size: 5vw;
  line-height: 10vw;
}
#findname {
  width: 20vw;
  height: 100%;
  font-size: 3.5vw;
  text-align: center;
  line-height: 6vh;
}
</style>
